<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-26 11:19:30
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-15 15:30:32
 * @FilePath: /vue3-uniapp/src/pages/tabbar/MineView/components/UserInfo/UserInfo.vue
-->
<script lang="ts" setup>
import { useUserStore } from '@/store';
import { getStaticImage } from '@/utils/index';

const userStore = useUserStore();
const { token, userInfo, currentRoleId, currentUserDept, currentRole } =
    storeToRefs(userStore);

const isLogin = computed(() => {
    return !!token.value;
});

const mobile = computed(() => {
    return isLogin.value
        ? userInfo.value?.mobile
            ? userInfo.value.mobile.substring(0, 3) +
              '****' +
              userInfo.value.mobile.substring(8)
            : ''
        : '--';
});
</script>

<template>
    <view
        class="userinfo-container bg-front flex flex-row items-center justify-between h-full"
    >
        <view>
            <view
                class="flex flex-row items-center justify-between mb-[16rpx]"
                @tap.stop="
                    () =>
                        !isLogin && userStore.createBackRouteOptionAndGoLogin()
                "
            >
                <view class="flex flex-row items-center">
                    <text class="c-text text-lg fw-700">{{
                        isLogin ? userInfo?.name : '登录'
                    }}</text>
                    <view class="c-text2 text-sm ml-[10rpx]">{{ mobile }}</view>
                </view>
            </view>
            <text class="c-text2 text-sm" v-if="isLogin"
                >{{
                    currentRoleId && [12, 16, 21, 22].includes(currentRoleId)
                        ? currentUserDept?.name
                        : ''
                }}
                {{ `${currentRole?.name || '待分配'}` }}</text
            >
        </view>
        <view v-if="userInfo?.avatar">
            <CustomImage
                shape="circle"
                :sourceId="userInfo.avatar"
                width="100rpx"
                height="100rpx"
            />
        </view>
        <view v-else>
            <image
                :src="
                    userInfo?.gender == '2'
                        ? getStaticImage(`/user/woman.png`)
                        : getStaticImage(`/user/man.png`)
                "
                style="width: 100rpx; height: 100rpx; border-radius: 50%"
            />
        </view>
    </view>
</template>

<style lang="scss" scoped>
.userinfo-container {
    padding: 32rpx;
    border-radius: 16rpx;
}
</style>
